<template>
    <div class="bloger-card">
        <div class="bloger-info">
            <!-- 头像 -->
            <img class="avatar" src="@/images/avatar.jpeg" alt="">
            <!-- 名称 -->
            <h3 class="bloger-name">Zengin</h3>
            <!-- 简介 -->
            <p>菜鸡前端</p>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.bloger-card {
    width: 300px;
    height: 366px;
    padding: auto 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px 2px #fa709a;
    .bloger-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 292px;
        height: 252px;
        padding: 8px;
        .avatar {
            width: 100px;
            height: 100px;
        }
        .bloger-name {
            margin: 16px auto;
        }
    }
}

</style>